<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn='confirmbtn'
    @dataSuccess='dataSuccess'
  >
 <warnings :width='"93%"' style="margin-bottom:20px;" v-if="formType==1">
        <p>
          温馨提示：若管理员姓名/手机号做修改，则该分校原管理员账号对应更改！
        </p>
   </warnings>
    <div class="formarea">
      <el-form
        ref="fxform"
        :model="fxforms"
        :rules="rules"
       size="medium"
        label-width="100px"
      >
        <el-form-item label="城市选择" prop="city" v-if="isshowDialog">
          <el-cascader
            v-model="fxforms.city"
            :options="cityOptions"
            @change='changeArea'
            :style="{ width: '100%' }"
             :show-all-levels="true"
            :placeholder="placeholdertext"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="驾校类型" prop="type">
          <el-select
            v-model="fxforms.type"
            placeholder="请选择类型驾校类型"
            multiple
            clearable
            :disabled='true'
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in schoolOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分校名称" prop="short_title">
          <el-input
            v-model="fxforms.short_title"
            placeholder="请输入分校名称"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员姓名" prop="leader_man">
          <el-input
            v-model="fxforms.leader_man"
            placeholder="请输入管理员姓名"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="leader_tel">
          <el-input
            v-model="fxforms.leader_tel"
            placeholder="请输入管理员手机号"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
          <el-row>
    <el-col :span='12'>
      <el-form-item label="经营方式" prop="belong_type">
          <el-radio-group v-model="fxforms.belong_type" size="medium">
            <el-radio v-for="(item, index) in belong_typeOptions" :key="index" :label="item.value"
              :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
    </el-col>
  </el-row>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
//api
import {getArea} from '@/api/common'
import warnings from '@/components/warnins'
import {addbranchData,upeditinfo,editbranch} from '@/api/branch'
export default {
  data() {
    return {
        placeholdertext:'请选择城市',
        //表单数据
        fxforms: {
        city: [],
        type: [2],
        // title: '',
        short_title: '',
        leader_man: '',
        leader_tel: '',
        belong_type:''
      },
      rules: {
        //加盟方式
        belong_type:[
          {
            required: true,
            message: '请选择经营方式',
            trigger: 'blur'
          }
        ],
        city: [{
          required: true,
          type: 'array',
          message: '请选择城市',
          trigger: 'change'
        }],
        type: [{
          required: true,
          type: 'array',
          message: '请选择驾校类型',
          trigger: 'change'
        }],
        short_title: [{
          required: true,
          message: '请输入分校名称',
          trigger: 'blur'
        },{
          pattern: /分校$/,
          message: '必须以“分校”结尾',
          trigger: 'blur'
        }],
        leader_man: [{
          required: true,
          message: '请输入管理员姓名',
          trigger: 'blur'
        }],
        leader_tel: [{
          required: true,
          message: '请输入管理员手机号',
          trigger: 'blur'
        },
        {
          pattern: /^1\d{10}$/,
          message: '手机号有误',
          trigger: 'blur'
        }],
      },
      cityOptions: [],
      belong_typeOptions: [{
        "label": "直营",
        "value": 1
      }, {
        "label": "加盟",
        "value": 2
      }],
      schoolOptions: [{
        "label": "分校",
        "value": 2
      }],
      cityProps: {
        "multiple": false,
        "label": "label",
        "value": "value",
        "children": "children"
      },
    }
  },
  components: {
    commonformdialog,
    warnings
  },
  props: { 
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType:{
      type:Number,
      default:0
    }
  },
  methods: {
    //数据加载成功
    dataSuccess(){

    },
    //选择城市
    changeArea(val){
      // this.fxforms.city = [val[val.length-1]]
    },
    //获取城市数据
    async getCityArea(){
      let data = await getArea()
      this.cityOptions = data.data
    },
    closeDialog() {
      //重置表单
      this.$refs['fxform'].resetFields()
      this.placeholdertext = '请选择城市'
      this.$emit('closedialog')
    },
    async confirmbtn(){
      
        //提交表单
        this.$refs['fxform'].validate(async valid => {
        if (!valid) return
        //判断是新增还是编辑
        if(this.formType==0){
    
        let {city,leader_man,leader_tel,short_title,title,type,belong_type} = this.fxforms
        let params = {
          city: city.slice(-1).join(),
          leader_man,
          leader_tel,
          short_title,
          title,
          type:type.join(),
          belong_type
        }
        let data = await addbranchData(params)
        if(data.code=='0000'){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          //关闭弹窗
          this.$refs['fxform'].resetFields()
          this.$emit('confirm')
        }
      }else{
        let {id,city,leader_man,leader_tel,short_title,title,type,belong_type} = this.fxforms
        let params = {
          id:id,
          city: city[city.length-1],
          leader_man,
          leader_tel,
          short_title,
          title,
          type:type.join(),
          belong_type
        }
        
        let data = await upeditinfo(params)
        if(data.code=='0000'){
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          this.$refs['fxform'].resetFields()
          this.$emit('confirm')
        }
      }
      })
    }
  },
  watch:{
    
  },
  mounted(){
    this.getCityArea()
    //编辑form
    this.$bus.on("editform",async (val)=>{
        //获取要编辑的id
        let id = val.id
        let data = await editbranch({schoolId:id})        
        this.fxforms = data.data
        this.fxforms.city = data.data.city.relation
        this.fxforms.type = [data.data.type.value]
    });
  },
  destroyed(){
    this.$bus.off("editform")
  }

}
</script>

<style scoped lang='scss'>
</style>